<div id="tab-3" class="tab-item tab-information">
    <div class="tab-item-content">
        <h3>TÊN ĐĂNG NHẬP VÀ MẬT MÃ</h3>
        <div class="info-tab" uid="<?php echo $uid; ?>">
            <span type="1" datatext="1" class="info-tab-edit">Chỉnh sửa</span>

            <div class="col-item">
                <p class="col-item-main">Tên đăng nhập: <span class="col-item-main-info"><?php echo $username; ?></span></p>
                <p class="col-item-child">
                    <?php
                        if($username == ""){
                            echo '<input  class="username" name="username" type="text" value="">';
                        }else{
                            echo '<input disabled class="username" name="username" type="text" value="'.$username.'">';
                        }
                    ?>
                </p>
            </div>

            <div class="col-item">
                <p class="col-password col-item-main">Mật mã: <span class="col-item-main-info">*******</span></p>
                <div class="col-item-child">
                    <p>Mật khẩu mới:</p>
                    <p><input class="password" name="password" type="password"></p>
                    <p>Nhập lại mật khẩu:</p>
                    <p><input class="rePassword" name="re_password" type="password"></p>
                </div>
            </div>

            <div class="col-item">
                <label class="account-notice">Tài khoản mật khẩu không đúng</label>
            </div>
            <p class="col-item-save">

                <input class="btn save-account" type="button" value="Cập nhật">
            </p>
        </div>

        <h3>THÔNG TIN CHỦ TÀI KHOẢN</h3>
        <div class="info-tab" uid="<?php echo $uid; ?>">
            <span type="2" datatext="1" class="info-tab-edit">Chỉnh sửa</span>
            <div class="col-item">
                <p class="col-item-main">Họ đệm: <span class="col-item-main-info"><?php echo $first_name; ?></span></p>
                <p class="col-item-child"><input class="first_name" name="first_name" type="text" value="<?php echo $first_name; ?>"></p>
            </div>

            <div class="col-item">
                <p class="col-item-main">Tên: <span class="col-item-main-info"><?php echo $last_name; ?></span></p>
                <p class="col-item-child"><input class="last_name" name="last_name" type="text" value="<?php echo $last_name; ?>"></p>
            </div>

            <div class="col-item">
                <p class="col-item-main">Giới tính: <span class="col-item-main-info">Nam</span></p>
                <p class="col-item-child">
                    <select class="gender" name="gender">
                        <option value="0">Nam</option>
                        <option value="1">Nữ</option>
                    </select>
                </p>
            </div>

            <p>Tuổi: 22</p>

            <div class="col-item">
                <p class="col-item-main">Giới thiệu: <span class="col-item-main-info"></span></p>
                <p class="col-item-child">
                    <textarea class="user_about" name="user_about"></textarea>
                </p>
            </div>

            <p class="col-item-save">
                <input class="btn save-information" type="button" value="Cập nhật">
            </p>
        </div>

        <h3>HÌNH ẢNH ĐẠI DIỆN</h3>
        <div class="info-tab" uid="<?php echo $uid; ?>">
            <div class="col-profile-picture">
                <div class="info-profile-picture">
                    <div class="profile-picture">
                        <img src="<?php echo ROOT_URL; ?>public/images/avatar.png">
                    </div>
                    <div class="profile-title">
                        <span class="choose"><input id="profile-default" type="radio" checked name="profile"></span>
                        <label class="text" for="profile-default">Buzzy</label>
                    </div>
                </div>

                <div class="info-profile-picture">
                    <div class="profile-picture">
                        <img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xpa1/v/t1.0-1/c0.0.50.50/p50x50/1185000_508216175934350_27922708_n.jpg?oh=eb5e013893f2ffeeb0fbe7055eca4d7a&oe=55201B8D&__gda__=1425217118_8ef5894d0c2e0b226fb3c9f8e88f3f4b">
                    </div>
                    <div class="profile-title">
                        <span class="choose"><input id="profile-facebook" type="radio" name="profile"></span>
                        <label class="text" for="profile-facebook">Facebook</label>
                    </div>
                </div>
            </div>
        </div>

        <h3>THÔNG TIN LIÊN LẠC</h3>
        <div class="info-tab" uid="<?php echo $uid; ?>">
            <span type="2" datatext="1" class="info-tab-edit">Chỉnh sửa</span>
            <div class="col-item">
                <p class="col-item-main">Email: <span class="col-item-main-info"><?php echo $email; ?></span></p>
                <p class="col-item-child"><input class="email" name="email" type="text" value="<?php echo $email; ?>"></p>
            </div>
            <div class="col-item">
                <p class="col-item-main">Điện thoại: <span class="col-item-main-info"><?php echo $phone; ?></span></p>
                <p class="col-item-child"><input class="phone" name="phone" type="text" value="<?php echo $phone; ?>"></p>
            </div>
            <p class="col-item-save">
                <input class="btn save-contact" type="button" value="Cập nhật">
            </p>
        </div>

        <h3>ĐỊA CHỈ</h3>
        <div class="info-tab" uid="<?php echo $uid; ?>">
            <span type="2" datatext="1" class="info-tab-edit">Chỉnh sửa</span>
            <div class="col-item">
                <p class="col-item-main">Công ty: <span class="col-item-main-info"><?php echo $company; ?></span></p>
                <p class="col-item-child"><input class="company" name="company" type="text" value="<?php echo $company; ?>"></p>
            </div>

            <div class="col-item">
                <p class="col-item-main">Địa chỉ 1: <span class="col-item-main-info"><?php echo $address_1; ?></span></p>
                <p class="col-item-child"><input class="address_1" name="address_1" type="text" value="<?php echo $address_1; ?>"></p>
            </div>

            <div class="col-item">
                <p class="col-item-main">Địa chỉ 2: <span class="col-item-main-info"><?php echo $address_2; ?></php></span></p>
                <p class="col-item-child"><input class="address_2" name="address_2" type="text" value="<?php echo $address_2;  ?>"></p>
            </div>

            <div class="col-item">
                <p class="col-item-main">Thành phố:
                    <span class="col-item-main-info">
                        <?php
                            if(isset($province_name)){
                                echo $province_name;
                            }
                        ?>
                    </span>
                </p>
                <p class="col-item-child">
                   <select class="province" name="province">
                       <?php
                            foreach($province as $value){
                                if($value['pid'] == $pid){
                                    echo '<option value="'.$value['pid'].'" selected>'.$value['province'].'</option>';
                                }else{
                                    echo '<option value="'.$value['pid'].'">'.$value['province'].'</option>';
                                }
                            }
                       ?>
                   </select>
                </p>
            </div>

            <p class="col-item-save">
                <input class="btn save-address" type="button" value="Cập nhật">
            </p>
        </div>

        <h3>CON</h3>
        <div class="info-tab" uid="<?php echo $uid; ?>">
            <span type="3" datatext="1" class="info-tab-edit" style="top: -20px">Chỉnh sửa</span>
            <?php
                if(isset($children) && sizeof($children) > 0){
                    ?>
                        <table>
                            <thead>
                            <tr>
                                <th>GIỚI TÍNH</th>
                                <th>THÁNG</th>
                                <th>NĂM</th>
                            </tr>
                            </thead>
                            <tbody>
                            <?php
                            foreach($children as $value){
                                ?>
                                <tr>
                                    <td>
                                        <?php
                                        if($value['child_sex'] == "1"){
                                            echo 'Nam';
                                        }else{
                                            echo 'Nữ';
                                        }
                                        ?>
                                    </td>
                                    <td>February</td>
                                    <td>2014</td>
                                </tr>
                            <?php
                            }
                            ?>
                            </tbody>
                        </table>
                    <?php
                }
            ?>

            <div class="create-children">
                <div uid="<?php echo $uid; ?>">
                    <select class="gender">
                        <option>Giới tính</option>
                        <option value="1">Nam</option>
                        <option value="2">Nữ</option>
                    </select>

                    <select class="month">
                        <option>Tháng</option>
                        <?php
                            for($i = 1; $i<=12; $i++){
                                echo '<option value="'.$i.'">'.$i.'</option>';
                            }
                        ?>
                    </select>

                    <select class="year">
                        <option>Năm</option>
                        <?php
                            for($j = 1960; $j < 2014; $j++){
                                echo '<option value="'.$j.'">'.$j.'</option>';
                            }
                        ?>
                    </select>

                    <p class="create-new-children">+ Thêm con</p>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(window).load(function(){

        var bar_header = "THÔNG TIN TÀI KHOẢN";
        var bar_title = "";
        var bar_info = "Bạn có thể cập nhật thông tin cá nhân, điều chỉnh chế độ hiển thị thông tin như hình ảnh, tên thân mật, thay đổi mật mã hoặc đóng tài khoản.";

        $('.bar-header').text(bar_header);
        $('.bar-title').text(bar_title);
        $('.bar-info').text(bar_info);

    });

    $(function(){

        var body = $('body');
        body.on('click', '.info-tab-edit', function(){
            var type = $(this).attr('type');
            switch (type){
                case "1":{
                    if($(this).attr("datatext") == "1"){
                        $(this).parent().find('.col-item').find('.col-item-child').show();
                        $(this).parent().find('.col-item').find('.col-item-main-info').hide();
                        $(this).parent().find('.col-item').find('.col-password').hide();
                        $(this).parent().find('.col-item-save').show();
                        $(this).text("Ẩn");
                        $(this).attr("datatext", "0");
                    }else{
                        $(this).parent().find('.col-item').find('.col-item-child').hide();
                        $(this).parent().find('.col-item').find('.col-item-main-info').show();
                        $(this).parent().find('.col-item').find('.col-password').show();
                        $(this).parent().find('.col-item-save').hide();
                        $(this).text("Chỉnh sửa");
                        $(this).attr("datatext", "1");
                    }
                    break;
                }
                case "2":{
                    if($(this).attr("datatext") == "1") {
                        $(this).parent().find('.col-item').find('.col-item-child').show();
                        $(this).parent().find('.col-item').find('.col-item-main-info').hide();
                        $(this).parent().find('.col-item-save').show();
                        $(this).text("Ẩn");
                        $(this).attr("datatext", "0");
                    }else{
                        $(this).parent().find('.col-item').find('.col-item-child').hide();
                        $(this).parent().find('.col-item').find('.col-item-main-info').show();
                        $(this).parent().find('.col-item-save').hide();
                        $(this).text("Chỉnh sửa");
                        $(this).attr("datatext", "1");
                    }
                    break;
                }
                case "3":{
                    if($(this).attr("datatext") == "1"){

                    }else{

                    }
                    break
                }
                default :{
                    break;
                }
            }

        }) ;

        //Save acount information
        body.on('click', '.save-account', function(){
            var object = $(this).parent().parent();
            var uid = object.attr("uid");
            var username = object.find('.username').val();
            var password = object.find('.password').val();
            var rePassword = object.find('.rePassword').val();
            var notice = object.find('.account-notice');
            notice.hide();
            if(password.length < 6){
                notice.text("Mật khẩu quá ngắn").show();
            }else if(password != rePassword){
                notice.text("Mật khẩu không khớp").show();
            }else{
                $.ajax({
                    type:"POST",
                    url:Root_url+"account/saveAccount",
                    dataType: "json",
                    data:{'uid': uid, 'username': username, 'password': password},
                    success:(function(data){
                        if(data.status == "ok"){
                            notice.text("Cập nhật thành công").show();
                        }
                    })
                });
            }

        });

        body.on('click', '.save-information', function(){
            var object = $(this).parent().parent();
            var uid = object.attr("uid");
            var first_name = object.find('.first_name').val();
            var last_name = object.find('.last_name').val();
            var gender = object.find('.gender').val();
            var about = object.find('.user_about').val();
            var notice = object.find('.account-notice');
            notice.hide();

            $.ajax({
                type:"POST",
                url:Root_url+"account/saveInformation",
                dataType: "json",
                data:{'uid': uid, 'first_name': first_name, 'last_name': last_name, 'gender': gender, 'about': about},
                success:(function(data){
                    if(data.status == "ok") {
                        notice.text("Cập nhật thành công").show();
                    }
                })
            });

        });

        body.on('click', '.save-contact', function(){
            var object = $(this).parent().parent();
            var uid = object.attr("uid");
            var email = object.find('.email').val();
            var phone = object.find('.phone').val();
            var notice = object.find('.account-notice');
            notice.hide();

            $.ajax({
                type:"POST",
                url:Root_url+"account/saveContact",
                dataType: "json",
                data:{'uid': uid, 'email': email, 'phone': phone},
                success:(function(data){
                    if(data.status == "ok"){
                        notice.text("Cập nhật thành công").show();
                    }

                })
            });
        });

        body.on('click', '.save-address', function(){
            var object = $(this).parent().parent();
            var uid = object.attr("uid");
            var company = object.find('.company').val();
            var address_1 = object.find('.address_1').val();
            var address_2 = object.find('.address_2');
            var city = object.find('.province').val();
            var notice = object.find('.account-notice');
            notice.hide();

            $.ajax({
                type:"POST",
                url:Root_url+"account/saveAddress",
                dataType: "json",
                data:{'uid': uid, 'company': company, 'address_1': address_1, 'address_2': address_2, 'province': city},
                success:(function(data){
                    if(data.status == "ok"){
                        notice.text("Cập nhật thành công").show();
                    }
                })
            });
        });

        body.on('click', '.create-new-children', function(){
            var uid = $(this).parent().attr('uid');
            var gender = $(this).parent().find('.gender').val();
            var month = $(this).parent().find('.month').val();
            var year = $(this).parent().find('.year').val();

            $.ajax({
                type:"POST",
                url:Root_url+"account/saveChildren",
                dataType: "json",
                data:{'uid': uid, 'gender': gender, 'month': month, 'year': year},
                success:(function(data){
                    if(data.status == "ok"){
                        notice.text("Cập nhật thành công").show();
                    }
                })
            });

        });
    });

</script>